<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery.min.js"></script>

    <link rel="stylesheet" type="text/css" href="css/login.css">
    <script type="text/javascript">
        // $(function(){
        // 	$("#username").blur(function(){
        // 		$.get("user","username="+this.value+"&method=checkUsername",function(data){
        // 			if(data.code == 10001){
        // 				$("#usernameMsg").html("用户名已经存在").css("color","red");
        // 				$("#registerBtn").attr("disabled",true);
        // 			}else{
        // 				$("#usernameMsg").html("用户名可用").css("color","green");
        // 				$("#registerBtn").removeAttr("disabled");
        // 			}
        // 		})
        // 	});
        // })
        var flag1 = false;
        var flag2 = false;
        var flag3 = false;
        var flag4 = false;
        $(function () {
            $("#username").blur(function () {
                $.get("user", "username=" + this.value + "&method=checkUserByName", function (res) {
                    //console.log(res)
                    if ($("#username").val() != "") {
                        if (res.success) {
                            $("#usernameMsg").html("用户名可用").css("color", "green");
                            flag1 = true;
                        } else {
                            $("#usernameMsg").html("用户名已经存在").css("color", "red");
                        }
                    } else {
                        $("#usernameMsg").html("用户名为空").css("color", "red");
                    }
                })
            })
            $("#email").blur(function () {
                var email = this.value;
                $.get("user", "email=" + this.value + "&method=checkUserByEmail", function (res) {
                    console.log(res)
                    var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
                    if (reg.test(email)) {
                        if (res.success) {
                            $("#helpBlock3").html("邮箱可用").css("color", "green");
                            flag2 = true;
                        } else {
                            $("#helpBlock3").html("邮箱已经存在").css("color", "red");
                        }
                    } else {
                        $("#helpBlock3").html("邮箱格式不正确").css("color", "red");
                    }

                })
            })
            $("#password").blur(function () {
                var pwd1 = $("#password");
                //var pwd2 = $("#password1");
                if (pwd1.val().length < 6) {
                    $("#helpBlock1").html("请输入6位以上字符").css("color", "red");
                }else {
                    $("#helpBlock1").html("").css("color", "red");
                    flag3=true;
                }
            })
            $("#password1").blur(function () {
                var pwd1 = $("#password");
                var pwd2 = $("#password1");
                if (pwd1.val() != pwd2.val()) {
                    $("#helpBlock2").html("两次密码要输入一致哦").css("color", "red");
                } else {
                    $("#helpBlock2").html("").css("color", "red");
                    flag4=true;
                }
            })
            $("#registerBtn").click(function () {
                if (flag1&flag2&flag3&flag4){
                    $("form").submit(true);
                }else {
                    $("form").submit(false);
                }
            })
        })
    </script>
    <title>注册</title>
</head>
<body>
<button onclick="aa()">aaaaaa</button>
<div class="regist">
    <div class="regist_center">
        <div class="regist_top">
            <div class="left fl"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;会员注册</div>
            <div class="right fr">
                <a href="index.jsp" target="_black">小米商城</a>
            </div>
            <div class="clear"></div>
            <div class="xian center"></div>
        </div>
        <div class="center-block" style="margin-top: 80px;">
            <form class="form-horizontal" action="user?method=addUser" method="post">
                <div class="form-group">
                    <label class="col-sm-2 control-label">用户名</label>
                    <div class="col-sm-8" style="width: 40%">
                        <input type="text" id="username" name="username" class="form-control col-sm-10"
                               placeholder="Username"/>
                    </div>
                    <div class="col-sm-2">
                        <p class="text-danger"><span class="help-block " id="usernameMsg"></span></p>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">密码</label>
                    <div class="col-sm-8" style="width: 40%">
                        <input type="password" name="password" id="password"
                               class="form-control col-sm-10" placeholder="Password"/>
                    </div>
                    <div class="col-sm-2">
                        <p class="text-danger"><span id="helpBlock1" class="help-block "></span></p>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">确认密码</label>
                    <div class="col-sm-8" style="width: 40%">
                        <input type="password" class="form-control col-sm-10" id="password1"
                               placeholder="Password Again"/>
                    </div>
                    <div class="col-sm-2">
                        <p class="text-danger"><span id="helpBlock2" class="help-block "></span></p>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">邮箱</label>
                    <div class="col-sm-8" style="width: 40%">
                        <input type="text" name="email" class="form-control col-sm-10" id="email"
                               placeholder="Email"/>
                    </div>
                    <div class="col-sm-2">
                        <p class="text-danger"><span id="helpBlock3" class="help-block "></span></p>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">性别</label>
                    <div class="col-sm-8" style="width: 40%">
                        <label class="radio-inline"> <input type="radio"
                                                            name="gender" value="男"> 男
                        </label> <label class="radio-inline"> <input checked type="radio"
                                                                     name="gender" value="女"> 女
                    </label>
                    </div>
                    <div class="col-sm-2">
                        <p class="text-danger"><span id="helpBlock4" class="help-block "></span></p>
                    </div>
                </div>
                <hr>
                <div class="form-group">
                    <div class="col-sm-7 col-sm-push-2">
                        <input id="registerBtn" type="submit" value="注册" class="btn btn-primary  btn-lg"
                               style="width: 200px;"/> &nbsp; &nbsp;
                        <input type="reset" value="重置" class="btn btn-default  btn-lg" style="width: 200px;"/>
                    </div>
                </div>
                <div>${registerMsg}</div>
            </form>

        </div>
    </div>
</div>

</body>
</html>